<template>
  <div class="resume-box">
    <!-- <h1>{{ count }}</h1> -->
    <div
      class="resume"
      :style="`${bgc[(index + 2) % 3]}`"
      v-for="(item, index) in list"
      :key="index"
    >
      <div
        v-show="current === index"
        class="content animate__animated animate__fadeInDownBig"
        :style="`${bgc[index]}`"
        :key="index"
      >
        <div v-if="index === 0" class="section">
          <div class="title">{{ SectionTitle }}</div>
          <div class="avator">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="des">{{ item.des }}</div>
          <div class="person-boxs">
            <div class="box">
              <div class="icon"></div>
              <div class="text"></div>
            </div>
          </div>
        </div>
        <div v-if="index === 1" class="section skills">
          <div class="title">{{ SectionTitle }}</div>
          <Canner></Canner>
        </div>
        <div v-if="index === 2" class="section skills">
          <div class="title">{{ SectionTitle }}</div>
          <div class="skills-box">
            <div
              v-for="(skill, itemIndex) in item.lists"
              :key="itemIndex"
              class="item"
            >
              {{ skill }}
            </div>
          </div>
        </div>
        <div v-if="index === 3" class="section skills">
          <div class="title">{{ SectionTitle }}</div>
          <Profiles :profiles="item.profiles"></Profiles>
        </div>
      </div>
    </div>
    <div @click="nextSection" class="index-control">
      <svg
        t="1611976617455"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="19166"
        width="64"
        height="64"
      >
        <path
          d="M199.36 447.99999999c8.512 0 16.64 3.328 22.592 9.34400001l294.208 294.144 285.696-285.696a32 32 0 0 1 45.248 45.248l-308.352 308.352a32 32 0 0 1-45.248 0l-316.8-316.8A32 32 0 0 1 199.36 447.99999999z m339.392 115.39200001a32 32 0 0 1-45.248-1e-8l-316.8-316.8a32 32 0 0 1 45.312-45.24799999l294.144 294.144 285.696-285.696a32 32 0 1 1 45.248 45.248L538.752 563.392z"
          fill="#2c2c2c"
          p-id="19167"
        ></path>
      </svg>
      <!-- <div
        @click="jump(index)"
        v-for="(item, index) in list"
        :key="index"
        class="item-index"
        :class="current === index ? 'active' : ''"
      ></div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Profiles from "./Profiles.vue";
import Canner from "./Canner.vue";
@Options({
  components: { Profiles, Canner },
  props: {
    msg: String,
  },
})
export default class HelloWorld extends Vue {
  msg!: string;
  current = 0;
  resumeDatas!: Map<string, any>;
  list: any[] = [];
  bgc: any[] = [
    "background: #409eff;",
    "background: #67C23A;",
    "background: #F56C6C;",
  ];

  setResumeData() {
    this.list.push(
      {
        name: "刘德华",
        avatar: "https://s3.ax1x.com/2020/12/04/DH5BuR.jpg",
        des: "这个人除了帅一无所有",
        address: "杭州",
        education: "本科",
        status: "在职",
      },
      {
        name: "刘德华",
        avatar: "",
        address: "杭州",
        education: "本科",
        status: "在职",
      },
      {
        lists: [
          "java",
          "mysql",
          "vue",
          "git",
          "java",
          "mysql",
          "vue",
          "git",
          "java",
          "mysql",
          "vue",
          "git",
        ],
      },
      {
        profiles: [
          {
            title: "vue",
            des: "这是藐视",
            skills: "vue vuex node.js",
            result: "这是结果",
          },
          {
            title: "vue",
            des: "这是藐视",
            skills: "vue vuex node.js",
            result: "这是结果",
          },
          {
            title: "vue",
            des: "这是藐视",
            skills: "vue vuex node.js",
            result: "这是结果",
          },
        ],
      }
    );
  }
  jump(index: number) {
    this.current = index;
  }
  autoSwith() {
    setInterval(() => {
      this.current++;
      if (this.current >= this.list.length) {
        this.current = 0;
      }
    }, 3000);
  }
  nextSection() {
    this.current++;
    if (this.current >= this.list.length) {
      this.current = 0;
    }
  }

  get SectionTitle() {
    let result = "";
    switch (this.current) {
      case 0:
        result = "Info";
        break;
      case 1:
        result = "Canner";
        break;
      case 2:
        result = "Skills";
        break;
      case 3:
        result = "Profiles";
        break;
    }
    return result;
  }
  mounted() {
    this.setResumeData();
    //this.autoSwith();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.resume-box {
  width: 100%;
  position: relative;
}
.resume {
  width: 100%;
  //  background: #409eff;
  //height: (100/3) vh;
  margin: 0;
  padding: 0;

  .content {
    height: 100vh;
    box-sizing: border-box;
    // animation: leftJoin 2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    .section {
      width: 50%;
      height: 50%;
      //@at-rootborder: 1px solid white;
      //border-radius: 20px;
      .title {
        font-size: 30px;
        font-weight: 600;
      }
      .avator {
        img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
        margin: 10px;
      }
      .name {
        font-size: 15px;
        font-weight: 400;
      }
      .des {
        font-size: 15px;
        margin: 10px;
      }
    }
    .skills {
      width: 90%;
      .skills-box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        // height: 50%;
        .item {
          margin: 10px;
          //width: 60px;
          padding: 5px 20px;
          height: 30px;
          border-radius: 20px;
          background: rgb(177, 177, 177);
          color: black;
          font-size: 15px;
          line-height: 30px;
          animation: left-right 2s ease-in-out infinite;
          &:nth-child(2n) {
            //background: chartreuse;
            animation: left-right2 2s ease-in-out infinite;
          }
        }
      }
    }
    &:first-child {
      color: white;
    }
  }
}
.index-control {
  cursor: pointer;
  position: fixed;
  width: 64px;
  bottom: 50px;
  left: 50%;
  // transform: translateX(-50%);
  margin-left: -32px;
  display: flex;
  animation: down-and-top 2s infinite;
  .item-index {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 20px;
    background: white;
    &.active {
      background: rgb(143, 142, 142);
    }
  }
}
@keyframes leftJoin {
  from {
    opacity: 0;
    height: 0px;
    //width: 0px;
    //transform: translateY(100%);
  }
  to {
    opacity: 1;
    height: 100vh;
  }
}
@keyframes down-and-top {
  0% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}
@keyframes left-right {
  0% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes left-right2 {
  0% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-10px);
  }
}
</style>
